/**
 * Created by raymon on 17-8-14.
 */
function MetroUI(zoom, spacing) {
    this.zoom = zoom ? zoom : 1;
    this.spacing = spacing ? spacing : 2;
    this.size = ($(window).width() / 10) * this.zoom;
    this.main = $(".MetroUI-main");
    this.mainW = this.main.attr("gridW");
    this.mainH = this.main.attr("gridH");

    this.moveing = 0;
    this.init = function () {
        this.size = ($(window).width() / 10) * this.zoom; //重新计算大小
        console.log(this.size);
        var windowW = $(window).width();
        var windowH = $(window).height();
        this.main.css("left", (windowW / 2) - (this.mainW * this.size / 2)).css("top", (windowH / 2) - (this.mainH * this.size / 2));


        var tileds = $(".MetroUI-tiled");
        for (var i = 0; i < tileds.length; i++) {
            var tiled = tileds.eq(i);
            var x = tiled.attr("gridX");
            var y = tiled.attr("gridY");
            tiled.css("left", x * this.size + x * this.spacing).css("top", y * this.size + y * this.spacing); //设置x,y
            var w = tiled.attr("gridW");
            var h = tiled.attr("gridH");
            tiled.css("width", w * this.size + (w - 1) * this.spacing).css("height", h * this.size + (h - 1) * this.spacing); //设置height,width
        }
        var board = $(".MetroUI-board");
        var cx = board.attr("gridX");
        var cy = board.attr("gridY");
        board.css("left", cx * this.size + cx * this.spacing).css("top", cy * this.size + cy * this.spacing); //设置x,y
        var cw = board.attr("gridW");
        var ch = board.attr("gridH");
        board.css("width", cw * this.size + (cw - 1) * this.spacing).css("height", ch * this.size + (ch - 1) * this.spacing); //设置height,width

    }

    this.show = function (tiled) {
        console.log(this.moveing);
        if (this.moveing != 0) {
            return false;
        }
        this.moveing=2;
        var tiled = $(tiled);
        var tx = tiled.css("left");
        var ty = tiled.css("top");
        var tw = tiled.css("width");
        var th = tiled.css("height");
        var board = $(".MetroUI-board");
        var cx = board.css("left");
        var cy = board.css("top");
        var cw = board.css("width");
        var ch = board.css("height");

        tiled.attr("onclick", "");
        tiled.animate({
            left: cx,
            top: cy,
            height: ch,
            width: cw
        }, function () {
            tiled.removeClass("MetroUI-tiled").addClass("MetroUI-board");
            tiled.children(".MetroUI-content").show();
            this.moveing--;
        }.bind(this));

        board.animate({
            left: tx,
            top: ty,
            height: th,
            width: tw
        }, function () {
            board.removeClass("MetroUI-board").addClass("MetroUI-tiled");
            board.children(".MetroUI-content").hide();
            board.attr("onclick", "metro.show(this)");
            this.moveing--;
        }.bind(this));
    }
}
